<template>
  <div v-show="load" class="go-skeleton">
      <div v-show="repeat == 1">
          <n-skeleton class="item" v-bind="$attrs"></n-skeleton>
      </div>
      <div v-show="repeat == 2">
          <n-skeleton class="item" v-bind="$attrs"></n-skeleton>
          <n-skeleton class="item" v-bind="$attrs" style="width: 60%"></n-skeleton>
      </div>
      <div v-show="repeat > 2">
          <n-skeleton class="item" v-bind="$attrs" :repeat="repeat - 2"></n-skeleton>
          <n-skeleton class="item" v-bind="$attrs" style="width: 60%"></n-skeleton>
          <n-skeleton class="item" v-bind="$attrs" style="width: 50%"></n-skeleton>
      </div>
  </div>
</template>

<script lang="ts" setup>
defineProps({
  repeat: {
      type: Number,
      default: 1,
  },
  load: {
      type: Boolean,
      default: true,
  },
})
</script>

<style lang="scss" scoped>
@include go('skeleton') {
  .item {
      margin-top: 5px;
      margin-left: 5px;
  }
  & {
      padding-bottom: 5px;
  }
}
</style>
